<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>K Examples</title>
	<link href="tuts/index.css" rel="stylesheet" type="text/css">
</head>
	
<body">
<div>
<article>
<header>
<h1>Hello World</h1>
<canvas id="canvas" width="770" height="100"></canvas>
<p>Example how to start using the "K" engine</p>
</header>
<section>
<p>We will discuss how to initialize K to make canvas like the above.</p>
</section>
<section>
	<h2>Initialize K</h2></header>
	<p>	Create a canvas in the body of html and give it an id./p>
	<p>For example:</p>
	<textarea readonly><canvas id="canvas" width="770" height="100"></canvas></textarea>
		<p>The you can init the K engine by passing the canvas. The syntax is: K.init([the canvas]);</p>
		<p>To get the canvas uses dom syntax like:</p>
		<textarea readonly>canvas = document.getElementById("canvas");</textarea>
		<p>The example: K.init(document.getElementById("canvas"));</p>
		<p>The engine will do the rest:</p>
		<li>Create context 2d. You can access by K.context. You also can access the canvas by K.canvas</li>
		<li>Create and initialize a Stage</li>
		<li>Create a viewport</li>
		<p>...but the engine not initialise EventManager to give you alternatives. If you want to use the engine's EventManager, just type K.EventManager.start(). To stop it, type: K.EventManager.stop()</p>
		<p>After initializing the engine, you can start coding...</p>
		</section>
		<section>
			<header> <h2>K.Sprite</h2></header>
			<p>Sprite is the main display object you can uses in K engine. The behaviour likes the Sprite in flash.</p>
			<p>All display object in K engine initialization having 4 optional parameters:</p>
			<li>The object name</li>
			<li>The x position</li>
			<li>The y position</li>
			<li>An object to initialize other properties</ol>
			<p>The complete construction is like this:</p>
			<textarea readonly>var o = new K.Sprite("actor", 20, 100, {data:{life:3, skill:2, weapon:["arrow", "knive", "sword"]};</textarea>
			<p>Remember to put the object under K.stage or a K.stage's child</p>
			<br/>
			<p>The Sprite has a graphics to draw. When you draw a graphics you are not directly drawing to the context until the engine render it.</p>
			<p>The Graphics has a lot of drawing commands and save the commands to enable you copy and use it in other Sprite. For example:</p>
<textarea  class="ta100" readonly>
var sprite1 = new K.Sprite("sprite1", 5, 5);
var g = sprite1.graphics;
g.beginFill("00ff33");
g.beginPath();
g.moveTo(0, 0);
g.lineTo(100, 0);
g.lineTo(75, 40);
g.lineTo(25, 40);
g.closePath();
g.fill();
K.stage.addChild(sprite1);
</textarea>
<p>Then you can create another Sprite and copy the drawing commands of the graphics:</p>
<textarea class="ta60" readonly>
var sprite2 = new K.Sprite("sprite2", 5, 80);
sprite2.graphics.commands = sprite1.graphics.command;
K.stage.addChild(sprite2);
</textarea>
<br/>
<p>I believe you have  a lot questions about the graphics, but we will discuss it later. To satisfy your curiosity, here are the Graphics's command supported today:</p>
<textarea class="ta400" readonly>
addPath(v)
addPaths(v)
addGeom(g)
clear()
clearRect(x, y, w, h)
drawCircle(x, y, r)
drawEllipse(x, y, w, h)
drawRect(x, y, w, h)
drawRoundRect(x, y, w, h, r1, r2, r3, r4)
drawPolygon(x, y, points)
drawSimetry(x, y, numPoint, distance)
drawStar(x, y, numPoint, distance, innerDistance)
drawBitmap(img, offsetX, offsetY)
drawText(txt, x, y, maxW, font, align, baseLine, stroke, fill)
moveTo(x, y)
lineTo(x, y)
arc(x,  y, r1, r2, clockWise)
arcTo(x1,  y1, x2, y2, r)
curveTo(a, b, c, d, e, f)
bezierCurveTo(x1, y1, x2, y2, x, y)
quadraticCurveTo(cpx, cpy, x, y)
beginPath()
closePath()
clip()
setShadow(color, blur, offsetX, offsetY)
lineStyle(thickness, color)
beginFill(color, alpha)
beginBitmapFill(texture, a, b, c, d, e, f, g, h)
beginGradientFill(type, colors, ratios, a, b, c, d, e, f)
endFill()
fillRect(x, y, w, h)
strokeRect(x, y, w, h)
rect(x, y, w, h)
stroke()
fill()
</textarea>
</section>

<section>
<h2>Source-code:</h2>
<textarea id="srccode" class="ta400" readonly>
/*
** The way to initialize K engine:
** Call it only if the html's body loaded.
*/
K.init(document.getElementById("canvas"));

/*
** Prepare global variables and methodes for you application
*/
var mainContainer = new K.Sprite("mainContainer", 0, 0);
var items = [];

function step(){
	// Update what ever you wish:
	items[0].x+= 2;
	if (items[0].x > K.canvas.width) items[0].x = -items[0].mapRect.width;
	// k.p1 = Math.PI / 180
	items[O].rotation += K.P1;
	items[1].rotation += K.P1;
	
	// Just call K.render() to do the rest
	K.render();
	// K engine lets you manage calling each frame by your self:
	window.requestAnimationFrame(step, 1000/30);
}
/*
** You can use addEventListener to all object
** but prepare the callback first:
*/
function shapeClick(e){
	alert(e.target.name + " was clicked");
}
/*
** Initializing HelloWorld
*/
function init(){
	
	K.stage.addChild(mainContainer);
	/*
	** Creating a Sprite
	*/
	var o = new K.Sprite("myBall", 0, 50);
	/*
	** Draw the graphics
	** It's not drawing directly to context. We have K.Graphics to manage it.
	*/
	var g = o.graphics;
	// beginGradientFill(type, colors, ratios, a, b, c, d, e, f)
	g.beginGradientFill("radial", ["#ffdd00", "#553300"],[0, 1], 0, 0, 10, 12, 12, 40);
	g.beginPath();
	g.drawCircle(0, 0, 24);
	g.closePath();
	g.fill();
	/*
	** Addit to an object
	*/
	mainContainer.addChild(o);
	/*
	** add to your pointer to enable you do something
	*/
	items.push(o);
	/*
	** Let's try to add EventListener
	*/
	o.addEventListener(K.Events.CLICK, shapeClick);
	
	/*
	** Create another Sprite
	*/
	o = new K.Sprite("smallBall", 37, 0);
	g = o.graphics;
	g.beginGradientFill("radial", ["#00eeff", "#000033"],[0, 1], 0, 0, 2, 8, 8, 30);
	g.beginPath();
	g.drawCircle(0, 0, 12);
	g.closePath();
	g.fill()
	/*
	** We add it to a Sprite we have created
	** to watch how the implementation of hierarchie
	*/
	items[0].addChild(o);
	items.push(o);
	o.addEventListener(K.Events.CLICK, shapeClick);
	
	/*
	** Now, create a Sprite and draw a text
	*/
	o = new K.Sprite("text1", 5, 5);
	o.graphics.beginFill("#ffffee")
	//drawText(txt, x, y, maxW, font, align, baseLine, stroke, fill)
	o.graphics.drawText("Hello World", 5, 35, 200, "24px sans-serief", "left", "middle", false, true);
	
	mainContainer.addChild(o);
	items.push(o);
	
	// Start the mouse, touch and keyboard:
	K.EventManager.start();
	// Call step for the first time:
	step();
}
/*
** Starting
*/
init();
</textarea>
<p>	That's all. </p>
</article>
</div>

	<script src="../js/K.js"></script>
	<script>
(function(){
	/*
	** The way to initialize K engine:
	** Call it only if the html's body loaded.
	*/
	K.init(document.getElementById("canvas"));
	
	/*
	** Prepare global variables and methodes for you application
	*/
	var mainContainer = new K.Sprite("mainContainer", 0, 0);
	var items = [];
	
	function step(){
		// Update what ever you wish:
		items[0].x+= 2;
		if (items[0].x > K.canvas.width) items[0].x = -items[0].mapRect.width;
		items[0].rotation += K.P1; // Math.PI / 180
		items[1].rotation += K.P1;
		// Just call K.render() to do the rest
		K.render();
		// K engine lets you manage calling each frame by your self:
		window.requestAnimationFrame(step, 1000/30);
	}
	/*
	** You can use addEventListener to all object
	** but prepare the callback first:
	*/
	function shapeClick(e){
		alert(e.target.name + " was clicked");
	}
	/*
	** Initializing HelloWorld
	*/
	function init(){
		
		K.stage.addChild(mainContainer);
		/*
		** Creating a Sprite
		*/
		var o = new K.Sprite("myBall", 0, 50);
		/*
		** Draw the graphics
		** It's not drawing directly to context. We have K.Graphics to manage it.
		*/
		var g = o.graphics;
		// beginGradientFill(type, colors, ratios, a, b, c, d, e, f)
		g.beginGradientFill("radial", ["#ffdd00", "#553300"],[0, 1], 0, 0, 10, 12, 12, 40);
		g.beginPath();
		g.drawCircle(0, 0, 24);
		g.closePath();
		g.fill();
		/*
		** Addit to an object
		*/
		mainContainer.addChild(o);
		/*
		** add to your pointer to enable you do something
		*/
		items.push(o);
		/*
		** Let's try to add EventListener
		*/
		o.addEventListener(K.Events.CLICK, shapeClick);
		
		/*
		** Create another Sprite
		*/
		o = new K.Sprite("smallBall", 37, 0);
		g = o.graphics;
		g.beginGradientFill("radial", ["#00eeff", "#000033"],[0, 1], 0, 0, 2, 8, 8, 30);
		g.beginPath();
		g.drawCircle(0, 0, 12);
		g.closePath();
		g.fill()
		/*
		** We add it to a Sprite we have created
		** to watch how the implementation of hierarchie
		*/
		items[0].addChild(o);
		items.push(o);
		o.addEventListener(K.Events.CLICK, shapeClick);
		
		/*
		** Now, create a Sprite and draw a text
		*/
		o = new K.Sprite("text1", 5, 5);
		o.graphics.beginFill("#ffffee")
		//drawText(txt, x, y, maxW, font, align, baseLine, stroke, fill)
		o.graphics.drawText("Hello World", 5, 35, 200, "24px sans-serief", "left", "middle", false, true);
		
		mainContainer.addChild(o);
		items.push(o);
		
		// Start the mouse, touch and keyboard:
		K.EventManager.start();
		// Call step for the first time:
		step();
	}
	/*
	** Starting
	*/
	init();
	
})();
	</script>
</body>
</html>
